<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>用户注册</title>
    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        body{
            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F4b%2Fb8%2F3b%2F4bb83bd08e8d9d8213dc585aff2f082e.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647412042&t=6c77af23353f6a50c16875b303ba0dcd);
        }
        fieldset{
            width: 450px;
            height: 400px;
            padding: 20px;
            border: 0px  solid red;
            border-radius: 15px;
            margin: 200px 1100px;
            background-color: transparent;
        }

    </style>
</head>
<body>
<div id="app">
    <fieldset>
        <legend style="font-size: 30px;">注册</legend>

        <a style="color: deepskyblue;margin-left: 300px;" href="/ssm/customer.html">立即登录</a>

        <el-form  :model="userInfo" status-icon :rules="rules" ref="userInfo" label-width="100px" class="demo-ruleFrom">
            账号:
            <el-from-item label="账号" prop="username">
                <el-input  v-model="userInfo.username"  placeholder="账号"  style="width: 300px; margin-left: 30px;  " /></el-input>
            </el-from-item><br>
            密码:
            <el-from-item label="密码" prop="password">
                <el-input  v-model="userInfo.password"  type="password" placeholder="密码" style="width: 300px;margin-top: 30px;margin-left: 30px;" /></el-input>
            </el-from-item><br>
            手机号:
            <el-from-item label="手机号" prop="telephone" >
                <el-input   v-model="userInfo.telephone"  type="text" placeholder="手机号" maxlength="11" style="width: 300px; margin-top: 30px;margin-left: 14px;" /></el-input>
            </el-from-item><br>
            验证码:
            <el-from-item prop="code" >
                <el-input  v-model="userInfo.code" style="border-radius: 5px; height: 30px; width: 185px;margin-left: 12px;margin-top: 30px;" placeholder="验证码"  /></el-input>
                <el-button   @click="sendCode()" id="foo">获取验证码</el-button>
            </el-from-item>
        </el-form>
        <el-button  type="primary"  @click="register()" style="border-radius: 5px;  width: 300px;margin-left: 70px;margin-top: 30px;">注册</el-button>
    </fieldset>
</div>






<script>

    var checkMobile = (rule,value,callback) => {
        if (value === "") {
            callback(new Error("手机号不可为空"));
        } else {
            if (value !== ""){
                var reg = /^1[3-9]\d{9}$/;
                if (!reg.test(value)) {
                    callback(new Error("请输入有效的手机号"));
                }
            }
            callback();
        }
    };


    var haha = new Vue({
        el:"#app",
        data:{
            userInfo:{},
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
                ],
                telephone:[
                    {required:true,message:"请输入手机号", trigger:"blur"},
                    {
                        validator:checkMobile,
                        min:11,
                        max:11,
                        message:"手机号格式错误",
                        trigger:"blur"
                    },
                    {
                        pattern:/^.+|[^\d.]/g,
                        message:'请输入正确的手机号'
                    }
                ]

            }
        },
        methods:{
            sendCode(){
                if (haha.userInfo.telephone==null){
                    haha.$message({
                        message: '手机号不能为空',
                        type: 'error'
                    })
                }else {
                    $.get("/ssm/customer/sendCode?telephone="+haha.userInfo.telephone,function (backData) {
                        if (backData.code==1){
                            haha.$message.success('短信已发送');
                        }
                    });
                    // 按钮失去点击效果
                    foo.disabled = "disabled";
                    // 标题变成正在发送(59)
                    var i = 59;
                    var t = setInterval(function(){
                        foo.innerHTML = "正在发送("+i+"s)";
                        i--;
                        if(i==0){
                            //标题变成发送验证码
                            foo.innerHTML = "发送验证码";
                            //恢复点击效果
                            foo.disabled = "";
                            //停止定时器
                            clearInterval(t);
                        }
                    },1000)
                }

            },
            register(){
                haha.$refs["userInfo"].validate((valid) => {
                    if (valid){
                        $.post("/ssm/customer/register",haha.userInfo,function (backData) {
                            if (backData.code == 2){
                                haha.$notify.error({
                                    title:"温馨提示",
                                    message:backData.msg
                                });
                            } else if (backData.code == 1){
                                haha.message({
                                    message:'注册成功',
                                    type:'success'
                                });
                            }
                        })
                    }
                })
            }
        }
    });
</script>
</body>
</html>
